<template>
  <div class="task-pross">
    <div class="task-pross-step">
      <div class="task-pross-value" :style="{width: setWidth}"></div>
    </div>
    <div class="task-pross-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
 import { defineProps, computed } from 'vue';
 const props = defineProps({
  total: {
    type: [Number, String],
    default: 0
  },
  value:{
    type: [Number, String],
    default: 0
  }
 })

 const setWidth = computed(() => {
  return (props.value / props.total) * 100 + '%'
 })
</script>

<style lang="scss" scoped>
.task-pross{ 
  position: relative;
  margin-bottom: 8px;
  &-step{
    height: 40px;
    line-height: 40px;
    background: #fff;
    border-radius: 4px;
    border: #e8e7e9 1px solid;
    position: relative;
  }
  &-value{
    width: 0%;
    height: 40px;
    position: absolute;
    left:0;
    top:0;
    background: #f1f1f3;
  }
  &-content{
    position: absolute;
    top:0;
    left:0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    justify-content: space-between;
    
  }
}
</style>